<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Omnifood" />

    <link rel="icon" href="img/favicon.png" />
    <link rel="apple-touch-icon" href="img/favicon-apple.png" />
    <link rel="manifest" href="manifest.webmanifest" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Noto+Sans+SC:wght@100..900&display=swap"
      rel="stylesheet"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Noto+Sans+SC:wght@100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap"
      rel="stylesheet"
    />

    <script
      type="module"
      src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
    ></script>
    <script
      nomodule
      src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"
    ></script>

    <link rel="stylesheet" href="css/general.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/queries.css" />

    <script
      defer
      src="https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js"
    ></script>
    <script defer src="js/script.js"></script>

    <title>Omni美食</title>
  </head>

  <body>
    <header class="header">
      <a href="#">
        <img class="logo" src="img/omnifood-logo.png" alt="添享美食Logo" />
      </a>

      <nav class="main-nav">
        <ul class="main-nav-list">
          <li><a class="main-nav-link" href="#how">服务流程</a></li>
          <li><a class="main-nav-link" href="#meals">样例餐谱</a></li>
          <li><a class="main-nav-link" href="#testimonials">客户评价</a></li>
          <li><a class="main-nav-link" href="#pricing">价格</a></li>
          <li><a class="main-nav-link nav-cta" href="#cta">免费试吃</a></li>
        </ul>
      </nav>

      <button class="btn-mobile-nav">
        <ion-icon class="icon-mobile-nav" name="menu-outline"></ion-icon>
        <ion-icon class="icon-mobile-nav" name="close-outline"></ion-icon>
      </button>
    </header>

    <main>
      <section class="section-hero">
        <div class="hero">
          <div class="hero-text-box">
            <h1 class="heading-primary">每一天都将健康膳食送到您的家门口</h1>

            <p class="hero-description">
              每年 365 天的智能食品订阅将让您再次获得健康饮食。
              我们将根据您的个人口味和营养需求量身定制您的餐食。
            </p>

            <a href="#cta" class="btn btn--full margin-right-sm"
              >开启美食之旅</a
            >
            <a href="#how" class="btn btn--outline">进一步探索 &darr;</a>

            <div class="deliverd-meals">
              <div class="deliverd-imgs">
                <img src="img/customers/customer-1.jpg" alt="客户的照片" />
                <img src="img/customers/customer-2.jpg" alt="客户的照片" />
                <img src="img/customers/customer-3.jpg" alt="客户的照片" />
                <img src="img/customers/customer-4.jpg" alt="客户的照片" />
                <img src="img/customers/customer-5.jpg" alt="客户的照片" />
                <img src="img/customers/customer-6.jpg" alt="客户的照片" />
              </div>

              <p class="deliverd-text">
                去年已送出超过 <span>250,000</span> 份美食！
              </p>
            </div>
          </div>

          <div class="hero-img-box">
            <picture>
              <source srcset="img/hero.webp" type="image/webp" />
              <source srcset="img/hero.png" type="image/png" />

              <img
                src="img/hero.png"
                class="hero-img"
                alt="桌上有几个盛着食物的碗,两盒肉便当,一个女人享受着美食"
              />
            </picture>
            <!-- <img
              src="img/hero.png"
              class="hero-img"
              alt="桌上有几个盛着食物的碗,两盒肉便当,一个女人享受着美食"
            /> -->
          </div>
        </div>
      </section>

      <section class="section-featured">
        <div class="container">
          <h2 class="heading-featured-in">备受以下媒体推崇</h2>
          <div class="logos">
            <img src="img/logos/techcrunch.png" alt="Techcrunch Logo" />
            <img
              src="img/logos/business-insider.png"
              alt="Business-Insider Logo"
            />
            <img src="img/logos/forbes.png" alt="Forbes Logo" />
            <img
              src="img/logos/the-new-york-times.png"
              alt="The-New-York-Times Logo"
            />
            <img src="img/logos/usa-today.png" alt="USA-Today Logo" />
          </div>
        </div>
      </section>

      <section class="section-how" id="how">
        <div class="container">
          <span class="subHeading">服务流程</span>
          <h2 class="heading-secondary">只需三步,把握每日健康</h2>
        </div>

        <div class="container grid grid--2-cols grid--center-v">
          <!-- STEP 01 -->
          <div class="step-text-box">
            <p class="step-number">01</p>
            <h3 class="heading-tertiary">告诉我们你喜欢的（及不喜欢的）</h3>

            <p class="step-description">
              永远不要再浪费时间纠结吃什么!Omnifood AI
              将为您量身打造100%个性化的每周餐谱。无论您遵循何种饮食,它都会确保您获得所需的全部营养和维生素！
            </p>
          </div>

          <div class="step-img-box">
            <img
              class="step-img"
              src="img/app/app-screen-1.png"
              alt="手机应用中的偏好界面"
            />
          </div>

          <!-- STEP 02 -->
          <div class="step-img-box">
            <img
              class="step-img"
              src="img/app/app-screen-2.png"
              alt="手机应用中的提供饮食计划界面"
            />
          </div>

          <div class="step-text-box">
            <p class="step-number">02</p>
            <h3 class="heading-tertiary">定制您的每周饮食计划</h3>

            <p class="step-description">
              每周一次,您需要确认由Omnifood
              AI为您生成的餐饮计划。您可以更改食材,换掉整顿餐点,甚至添加自己的食谱
            </p>
          </div>

          <!-- STEP 03 -->
          <div class="step-text-box">
            <p class="step-number">03</p>
            <h3 class="heading-tertiary">选择您方便的时间收餐</h3>

            <p class="step-description">
              城中顶尖厨师将每天为您烹饪精选美食,我们将在您方便的时间送餐到您家门口。您还可以每天根据需要更改送餐时间和地址！
            </p>
          </div>

          <div class="step-img-box">
            <img
              class="step-img"
              src="img/app/app-screen-3.png"
              alt="手机应用中的发货界面"
            />
          </div>
        </div>
      </section>

      <section class="section-meals" id="meals">
        <div class="container center-text">
          <span class="subHeading">样例餐谱</span>
          <h2 class="heading-secondary">
            Omnifood AI 从 5000 多种食谱中进行选择
          </h2>
        </div>

        <div class="container grid grid--3-cols margin-bottom-md">
          <div class="meal">
            <img src="img/meals/meal-1.jpg" class="meal-img" alt="日式煎饺" />

            <div class="meal-content">
              <div class="meal-tags">
                <span class="tag tag--vegetarian">素食主义</span>
              </div>
              <p class="meal-title">日式煎饺</p>
              <ul class="meal-attributes">
                <li class="meal-attribute">
                  <ion-icon class="meal-icon" name="flame-outline"></ion-icon>
                  <span><strong>650</strong> 卡路里</span>
                </li>
                <li class="meal-attribute">
                  <ion-icon class="meal-icon" name="restaurant-outline">
                  </ion-icon>
                  <span> 营养评分 &reg; <strong>74</strong> </span>
                </li>
                <li class="meal-attribute">
                  <ion-icon class="meal-icon" name="star-outline"></ion-icon>
                  <span>好评如潮 <strong>4.9</strong>(537)</span>
                </li>
              </ul>
            </div>
          </div>

          <div class="meal">
            <img src="img/meals/meal-2.jpg" class="meal-img" alt="鳄梨沙拉" />

            <div class="meal-content">
              <div class="meal-tags">
                <span class="tag tag--vegan">轻素食</span>
                <span class="tag tag--paleo">古饮食</span>
              </div>
              <p class="meal-title">鳄梨沙拉</p>
              <ul class="meal-attributes">
                <li class="meal-attribute">
                  <ion-icon class="meal-icon" name="flame-outline"></ion-icon>
                  <span><strong>400</strong> 卡路里</span>
                </li>
                <li class="meal-attribute">
                  <ion-icon class="meal-icon" name="restaurant-outline">
                  </ion-icon>
                  <span> 营养评分 &reg; <strong>92</strong> </span>
                </li>
                <li class="meal-attribute">
                  <ion-icon class="meal-icon" name="star-outline"></ion-icon>
                  <span>备受推崇 <strong>4.8</strong>(441)</span>
                </li>
              </ul>
            </div>
          </div>

          <div class="diets">
            <h3 class="heading-tertiary">我们接纳所有的你</h3>
            <ul class="list">
              <li class="list-item">
                <ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
                <span>素食主义者</span>
              </li>
              <li class="list-item">
                <ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
                <span>纯素食主义者</span>
              </li>
              <li class="list-item">
                <ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
                <span>鱼素食主义者</span>
              </li>
              <li class="list-item">
                <ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
                <span>无麸质饮食</span>
              </li>
              <li class="list-item">
                <ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
                <span>无乳糖饮食</span>
              </li>
              <li class="list-item">
                <ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
                <span>生酮饮食</span>
              </li>
              <li class="list-item">
                <ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
                <span>原始饮食</span>
              </li>
              <li class="list-item">
                <ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
                <span>低FODMAP饮食</span>
              </li>
              <li class="list-item">
                <ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
                <span>儿童友好饮食</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="container all-recipes">
          <a href="#" class="link">查看所有餐谱 &rarr;</a>
        </div>
      </section>

      <section class="section-testimonials" id="testimonials">
        <div class="testimonials-container">
          <span class="subHeading">客户评价</span>
          <h2 class="heading-secondary">围炉聚炊欢呼处，百味消融小釜中</h2>

          <div class="testimonials">
            <figure class="testimonial">
              <img
                class="testimonial-img"
                src="img/customers/dave.jpg"
                alt="客户戴夫·布莱森的照片"
              />
              <blockquote class="testimonial-text">
                “经济实惠、健康美味的餐点，甚至无需手动订购，感觉真是神奇！”
              </blockquote>

              <p class="testimonial-name">&mdash; 戴夫·布莱森</p>
            </figure>

            <figure class="testimonial">
              <img
                class="testimonial-img"
                src="img/customers/ben.jpg"
                alt="客户本·哈德利的照片"
              />
              <blockquote class="testimonial-text">
                “AI算法真是太厉害了，每次都能为我选择合适的餐点。我不用再为食物而烦恼，真是太棒了！”
              </blockquote>

              <p class="testimonial-name">&mdash; 本·哈德利</p>
            </figure>

            <figure class="testimonial">
              <img
                class="testimonial-img"
                src="img/customers/steve.jpg"
                alt="客户史蒂夫·米勒的照片"
              />
              <blockquote class="testimonial-text">
                “Omnifood真是救命稻草！我的公司正在起步阶段，所以根本没有时间做饭。现在的我已经离不开每天的餐点了！”
              </blockquote>

              <p class="testimonial-name">&mdash; 史蒂夫·米勒</p>
            </figure>

            <figure class="testimonial">
              <img
                class="testimonial-img"
                src="img/customers/hannah.jpg"
                alt="客户汉娜·史密斯的照片"
              />
              <blockquote class="testimonial-text">
                “我为整个家庭开通了Omnifood，节省了很多的时间！另外，Omnifood所有的食物都是有机、纯素的，没有塑料包装。”
              </blockquote>

              <p class="testimonial-name">&mdash; 汉娜·史密斯</p>
            </figure>
          </div>
        </div>

        <div class="gallery">
          <figure class="gallery-item">
            <img src="img/gallery/gallery-1.jpg" alt="烹饪好的美食照片" />
            <!-- <figcaption>Caption</figcaption> -->
          </figure>

          <figure class="gallery-item">
            <img src="img/gallery/gallery-2.jpg" alt="烹饪好的美食照片" />
          </figure>

          <figure class="gallery-item">
            <img src="img/gallery/gallery-3.jpg" alt="烹饪好的美食照片" />
          </figure>

          <figure class="gallery-item">
            <img src="img/gallery/gallery-4.jpg" alt="烹饪好的美食照片" />
          </figure>

          <figure class="gallery-item">
            <img src="img/gallery/gallery-5.jpg" alt="烹饪好的美食照片" />
          </figure>

          <figure class="gallery-item">
            <img src="img/gallery/gallery-6.jpg" alt="烹饪好的美食照片" />
          </figure>

          <figure class="gallery-item">
            <img src="img/gallery/gallery-7.jpg" alt="烹饪好的美食照片" />
          </figure>

          <figure class="gallery-item">
            <img src="img/gallery/gallery-8.jpg" alt="烹饪好的美食照片" />
          </figure>

          <figure class="gallery-item">
            <img src="img/gallery/gallery-9.jpg" alt="烹饪好的美食照片" />
          </figure>

          <figure class="gallery-item">
            <img src="img/gallery/gallery-10.jpg" alt="烹饪好的美食照片" />
          </figure>

          <figure class="gallery-item">
            <img src="img/gallery/gallery-11.jpg" alt="烹饪好的美食照片" />
          </figure>

          <figure class="gallery-item">
            <img src="img/gallery/gallery-12.jpg" alt="烹饪好的美食照片" />
          </figure>
        </div>
      </section>

      <section class="section-pricing" id="pricing">
        <div class="container">
          <span class="subHeading">价格</span>
          <h2 class="heading-secondary">主打实惠，为生活增添一点美味</h2>
        </div>

        <div class="container grid grid--2-cols margin-bottom-md">
          <div class="pricing-plan pricing-plan--starter">
            <header class="plan-header">
              <p class="plan-name">基础套餐</p>
              <p class="plan-price"><span>￥</span>888</p>
              <p class="plan-text">每月 平均￥30 每餐!</p>
            </header>

            <ul class="list">
              <li class="list-item">
                <ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
                <span>日供一份餐食</span>
              </li>
              <li class="list-item">
                <ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
                <span>供餐时间为11-21时</span>
              </li>
              <li class="list-item">
                <ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
                <span>免费派送</span>
              </li>
              <li class="list-item">
                <ion-icon class="list-icon" name="close-outline"></ion-icon>
              </li>
            </ul>

            <div class="plan-sign-up">
              <a href="#cta" class="btn btn--full">开启美食之旅</a>
            </div>
          </div>

          <div class="pricing-plan pricing-plan--complete">
            <header class="plan-header">
              <p class="plan-name">完整套餐</p>
              <p class="plan-price"><span>￥</span>1488</p>
              <p class="plan-text">每月 只需￥25 每餐!</p>
            </header>

            <ul class="list">
              <li class="list-item">
                <ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
                <span>日供<strong>两份</strong>餐食</span>
              </li>
              <li class="list-item">
                <ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
                <span><strong>全天</strong>供餐</span>
              </li>
              <li class="list-item">
                <ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
                <span>免费派送</span>
              </li>
              <li class="list-item">
                <ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
                <span>获取最新食谱信息</span>
              </li>
            </ul>

            <div class="plan-sign-up">
              <a href="#cta" class="btn btn--full">开启美食之旅</a>
            </div>
          </div>
        </div>

        <div class="container grid">
          <aside class="plan-details">
            价格已包含所有适用税费,用户可随时取消订阅。 两种订阅都包含以下内容：
          </aside>
        </div>

        <div class="container grid grid--4-cols">
          <div class="feature">
            <ion-icon class="feature-icon" name="infinite-outline"></ion-icon>
            <p class="feature-title">再也不用亲自下厨！</p>
            <p class="feature-text">我们的订阅有效期涵盖一整年，甚至包括假期</p>
          </div>

          <div class="feature">
            <ion-icon class="feature-icon" name="nutrition-outline"></ion-icon>
            <p class="feature-title">只用本地有机食材</p>
            <p class="feature-text">我们承诺只使用本地的有机新鲜食材为您烹饪</p>
          </div>

          <div class="feature">
            <ion-icon class="feature-icon" name="leaf-outline"></ion-icon>
            <p class="feature-title">从不浪费</p>
            <p class="feature-text">
              我们所有的合作伙伴都仅使用可重复使用的容器来包装所有的餐点
            </p>
          </div>

          <div class="feature">
            <ion-icon class="feature-icon" name="pause-outline"></ion-icon>
            <p class="feature-title">随时可暂停订阅</p>
            <p class="feature-text">
              去度假了？只需暂停您的订阅，我们会退还未使用的天数
            </p>
          </div>
        </div>
      </section>

      <section class="section-cta" id="cta">
        <div class="container">
          <div class="cta">
            <div class="cta-text-box">
              <h2 class="heading-secondary">第一份餐点我们请客！</h2>
              <p class="cta-text">
                健康、美味又无忧的餐点已经等着您了。立即开始健康饮食吧！您可以随时取消或暂停订阅。而且，第一份餐点由我们请客！
              </p>

              <form class="cta-form" name="sign-up" netlify>
                <div>
                  <label for="full-name">姓名</label>
                  <input
                    id="full-name"
                    type="text"
                    placeholder="请输入您的姓名"
                    name="full-name"
                    required
                  />
                </div>

                <div>
                  <label for="email">邮箱</label>
                  <input
                    id="email"
                    type="email"
                    placeholder="me@example.com"
                    name="email"
                    required
                  />
                </div>

                <div>
                  <label for="select-where">您从哪里了解到我们的？</label>
                  <select name="select-where" id="select-where" required>
                    <option value="">请选择一个选项</option>
                    <option value="friends">朋友或家人</option>
                    <option value="youtube">Youtube视频</option>
                    <option value="podcast">播客</option>
                    <option value="ad">Facebook广告</option>
                    <option value="others">其它途径</option>
                  </select>
                </div>

                <button class="btn btn--form">即刻注册</button>
              </form>
            </div>
            <div
              class="cta-img-box"
              role="img"
              aria-label="一个女人正在享用食物"
            ></div>
          </div>
        </div>
      </section>
    </main>

    <footer class="footer">
      <div class="container grid grid--footer">
        <div class="logo-col">
          <a href="#" class="footer-logo">
            <img class="logo" src="img/omnifood-logo.png" alt="添享美食Logo" />
          </a>

          <ul class="social-links">
            <li>
              <a class="footer-link" href="#"
                ><ion-icon class="social-icon" name="logo-instagram"></ion-icon
              ></a>
            </li>
            <li>
              <a class="footer-link" href="#"
                ><ion-icon class="social-icon" name="logo-facebook"></ion-icon
              ></a>
            </li>
            <li>
              <a class="footer-link" href="#"
                ><ion-icon class="social-icon" name="logo-twitter"></ion-icon
              ></a>
            </li>
          </ul>

          <p class="copyright">
            Copyright &copy; <span class="year">2024</span> Omnifood. All Rights
            Reserved. Omni公司 版权所有
          </p>
        </div>

        <div class="address-col">
          <p class="footer-heading">联系我们</p>
          <address class="contacts">
            <p class="address">SD No.1-329, Fuzhou Campus-ECUT</p>
            <p>
              <a class="footer-link" href="tel:415-201-6370">415-201-6370</a>
              <a class="footer-link" href="mailto:hello@omnifood.com"
                >hello@omnifood.com</a
              >
            </p>
          </address>
        </div>

        <nav class="nav-col">
          <p class="footer-heading">账户</p>

          <ul class="footer-nav">
            <li><a class="footer-link" href="#">创建账户</a></li>
            <li><a class="footer-link" href="#">登录</a></li>
            <li><a class="footer-link" href="#">iOS 应用</a></li>
            <li><a class="footer-link" href="#">Android 应用</a></li>
          </ul>
        </nav>

        <nav class="nav-col">
          <p class="footer-heading">公司</p>

          <ul class="footer-nav">
            <li><a class="footer-link" href="#">关于 Omnifood</a></li>
            <li><a class="footer-link" href="#">商务合作</a></li>
            <li><a class="footer-link" href="#">烹饪合作</a></li>
            <li><a class="footer-link" href="#">加入我们</a></li>
          </ul>
        </nav>

        <nav class="nav-col">
          <p class="footer-heading">资源</p>
          <ul class="footer-nav">
            <li><a class="footer-link" href="#">食谱目录</a></li>
            <li><a class="footer-link" href="#">帮助中心</a></li>
            <li><a class="footer-link" href="#">隐私政策与条款</a></li>
          </ul>
        </nav>

        <div></div>
      </div>
    </footer>
  </body>
</html>
